diff --git a/web/media/media.css b/web/media/media.css
index 1825d0139..01834308e 100644
--- a/web/media/media.css
+++ b/web/media/media.css
@@ -1,129 +1,132 @@
 span.clickable {
   cursor: pointer;
 }
 
 span.multimedia {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   position: relative;
   vertical-align: top;
 }
 span.multimedia > .multimediaImage {
   position: relative;
   min-height: 50px;
   min-width: 50px;
 }
 span.multimedia > .multimediaImage > img,
 span.multimedia > .multimediaImage > video {
   /* this should be in sync with the MAX_THUMBNAIL_HEIGHT */
   /* in multimedia.react.js */
   max-height: 200px;
   max-width: 100%;
 }
 span.multimedia > .multimediaImage svg.removeUpload {
   display: none;
   position: absolute;
   top: 3px;
   right: 3px;
   color: white;
   border-radius: 50%;
   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
   background-color: rgba(34, 34, 34, 0.67);
 }
 span.multimedia:hover > .multimediaImage svg.removeUpload {
   display: inherit;
 }
 span.multimedia svg.uploadError {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto auto;
   color: white;
   border-radius: 50%;
   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
   background-color: #dd2222;
 }
 span.multimedia > svg.progressIndicator {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto auto;
   width: 50px;
   height: 50px;
 }
 
 span.multimedia .loadingIndicator,
 div.multimediaModalOverlay .loadingIndicator {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto auto;
   width: 25px;
   height: 25px;
 }
 
 :global(.CircularProgressbar-background) {
   fill: #666 !important;
 }
 :global(.CircularProgressbar-text) {
   fill: #fff !important;
 }
 :global(.CircularProgressbar-path) {
   stroke: #fff !important;
 }
 :global(.CircularProgressbar-trail) {
   stroke: transparent !important;
 }
 
 div.multimediaModalOverlay {
   position: fixed;
   left: 0;
   top: 0;
   z-index: 4;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.9);
   overflow: auto;
   padding: 10px;
   box-sizing: border-box;
   display: flex;
   justify-content: center;
 }
 div.multimediaModalOverlay > .mediaContainer {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
 }
+div.multimediaModalOverlay > .mediaContainer:focus {
+  outline: none;
+}
 div.mediaContainer > img,
 div.mediaContainer > video {
   width: auto;
   height: auto;
   max-width: 100%;
   max-height: 100%;
   display: block;
   margin: auto;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
 }
 svg.closeMultimediaModal {
   position: absolute;
   cursor: pointer;
   top: 15px;
   right: 15px;
   color: white;
   border-radius: 50%;
   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
   background-color: rgba(34, 34, 34, 0.67);
   height: 36px;
   width: 36px;
 }
diff --git a/web/media/multimedia-modal.react.js b/web/media/multimedia-modal.react.js
index f7b189f36..1da7f9f8d 100644
--- a/web/media/multimedia-modal.react.js
+++ b/web/media/multimedia-modal.react.js
@@ -1,205 +1,208 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { XCircle as XCircleIcon } from 'react-feather';
 
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { fetchableMediaURI } from 'lib/media/media-utils.js';
 import type {
   EncryptedMediaType,
   MediaType,
   Dimensions,
 } from 'lib/types/media-types.js';
 
 import EncryptedMultimedia from './encrypted-multimedia.react.js';
 import LoadableVideo from './loadable-video.react.js';
 import { usePlaceholder } from './media-utils.js';
 import css from './media.css';
 
 type MediaInfo =
   | {
       +type: MediaType,
       +uri: string,
       +dimensions: ?Dimensions,
       +thumbHash: ?string,
       +thumbnailURI: ?string,
     }
   | {
       +type: EncryptedMediaType,
       +blobURI: string,
       +encryptionKey: string,
       +dimensions: ?Dimensions,
       +thumbHash: ?string,
       +thumbnailBlobURI: ?string,
       +thumbnailEncryptionKey: ?string,
     };
 
 type BaseProps = {
   +media: MediaInfo,
 };
 
 type Props = {
   ...BaseProps,
   +popModal: (modal: ?React.Node) => void,
   +placeholderImage: ?string,
 };
 
 type State = {
   +dimensions: ?Dimensions,
 };
 
 class MultimediaModal extends React.PureComponent<Props, State> {
   overlay: ?HTMLDivElement;
 
   constructor(props: Props) {
     super(props);
     this.state = { dimensions: null };
   }
 
   componentDidMount() {
     invariant(this.overlay, 'overlay ref unset');
     this.overlay.focus();
     this.calculateMediaDimensions();
     window.addEventListener('resize', this.calculateMediaDimensions);
   }
 
   componentWillUnmount() {
     window.removeEventListener('resize', this.calculateMediaDimensions);
   }
 
   render(): React.Node {
     let mediaModalItem;
     const { media, placeholderImage } = this.props;
     const style = {
       backgroundImage: placeholderImage
         ? `url(${placeholderImage})`
         : undefined,
     };
     if (media.type === 'photo') {
       const uri = fetchableMediaURI(media.uri);
       mediaModalItem = <img src={uri} style={style} />;
     } else if (media.type === 'video') {
       const uri = fetchableMediaURI(media.uri);
       const { thumbnailURI } = media;
       invariant(thumbnailURI, 'video missing thumbnail');
       mediaModalItem = (
         <LoadableVideo
           uri={uri}
           thumbnailSource={{ thumbnailURI }}
           thumbHashDataURL={placeholderImage}
         />
       );
     } else {
       invariant(
         media.type === 'encrypted_photo' || media.type === 'encrypted_video',
         'invalid media type',
       );
       const {
         type,
         blobURI,
         encryptionKey,
         thumbnailBlobURI,
         thumbnailEncryptionKey,
       } = media;
       const dimensions = this.state.dimensions ?? media.dimensions;
       const elementStyle = dimensions
         ? {
             width: `${dimensions.width}px`,
             height: `${dimensions.height}px`,
           }
         : undefined;
       mediaModalItem = (
         <EncryptedMultimedia
           type={type}
           blobURI={blobURI}
           encryptionKey={encryptionKey}
           thumbnailBlobURI={thumbnailBlobURI}
           thumbnailEncryptionKey={thumbnailEncryptionKey}
           placeholderSrc={placeholderImage}
           elementStyle={elementStyle}
         />
       );
     }
 
     return (
       <div
         className={css.multimediaModalOverlay}
         onClick={this.onBackgroundClick}
-        tabIndex={0}
-        onKeyDown={this.onKeyDown}
       >
-        <div ref={this.overlayRef} className={css.mediaContainer}>
+        <div
+          ref={this.overlayRef}
+          className={css.mediaContainer}
+          tabIndex={0}
+          onKeyDown={this.onKeyDown}
+        >
           {mediaModalItem}
         </div>
         <XCircleIcon
           onClick={this.props.popModal}
           className={css.closeMultimediaModal}
         />
       </div>
     );
   }
 
   overlayRef: (overlay: ?HTMLDivElement) => void = overlay => {
     this.overlay = overlay;
   };
 
   onBackgroundClick: (event: SyntheticEvent<HTMLDivElement>) => void =
     event => {
       if (event.target === this.overlay) {
         this.props.popModal();
       }
     };
 
   onKeyDown: (event: SyntheticKeyboardEvent<HTMLDivElement>) => void =
     event => {
       if (event.key === 'Escape') {
         this.props.popModal();
       }
     };
 
   calculateMediaDimensions: () => void = () => {
     if (!this.overlay || !this.props.media.dimensions) {
       return;
     }
     const containerWidth = this.overlay.clientWidth;
     const containerHeight = this.overlay.clientHeight;
     const containerAspectRatio = containerWidth / containerHeight;
 
     const { width: mediaWidth, height: mediaHeight } =
       this.props.media.dimensions;
     const mediaAspectRatio = mediaWidth / mediaHeight;
 
     let newWidth, newHeight;
     if (containerAspectRatio > mediaAspectRatio) {
       newWidth = Math.min(mediaWidth, containerHeight * mediaAspectRatio);
       newHeight = newWidth / mediaAspectRatio;
     } else {
       newHeight = Math.min(mediaHeight, containerWidth / mediaAspectRatio);
       newWidth = newHeight * mediaAspectRatio;
     }
     this.setState({
       dimensions: {
         width: newWidth,
         height: newHeight,
       },
     });
   };
 }
 
 function ConnectedMultiMediaModal(props: BaseProps): React.Node {
   const modalContext = useModalContext();
   const { thumbHash, encryptionKey, thumbnailEncryptionKey } = props.media;
   const thumbHashEncryptionKey = thumbnailEncryptionKey ?? encryptionKey;
   const placeholderImage = usePlaceholder(thumbHash, thumbHashEncryptionKey);
 
   return (
     <MultimediaModal
       {...props}
       popModal={modalContext.popModal}
       placeholderImage={placeholderImage}
     />
   );
 }
 
 export default ConnectedMultiMediaModal;